<template>
  <div class="mbti-container">
    <el-card class="mbti-card" shadow="hover">
      <div class="mbti-content">
        <h1 class="title">您的专属MBTI测试报告已生成</h1>
        <h3 class="subtitle">迈尔斯-布里格斯类型指标</h3>

        <!-- 显示用户信息 -->
        <div v-if="data.user" class="user-info">
          <el-tag type="info">测试学生: {{ data.user.studentName }}</el-tag>
        </div>
        <div class="notice-box">
          <h2 class="notice-title" style="text-align: center;">MBTI测试结果</h2>
          <ol class="notice-list">
            <div class="notice-item" style="text-align: center;
    margin-top: 20px;">你的类型是? </div>
            <div class="notice-item" style="text-align: center;
    margin-top: 20px;">{{ data.json.result}} </div>
            <div v-if="data.json.result === 'ENFJ'" class="notice-item" style="text-align: center;
    margin-top: 20px;">ENFJ--主人公型|教育家|老师|大剑哥 </div>
            <div v-else-if="data.json.result === 'ENFP'" class="notice-item" style="text-align: center;
    margin-top: 20px;">ENFP--竞选者型|记者型|倡导型|激励型|追梦人|冠军|快乐小狗 </div>
            <div v-else-if="data.json.result === 'ENTJ'" class="notice-item" style="text-align: center;
    margin-top: 20px;">ENTJ--指挥官型|陆军元帅|天生的领导者|伟人型|小暴君</div>
            <div v-else-if="data.json.result === 'ENTP'" class="notice-item" style="text-align: center;
    margin-top: 20px;">ENTP--辩论家型|发明家|有远见的人|骨折眉毛 </div>
            <div v-else-if="data.json.result === 'ESFJ'" class="notice-item" style="text-align: center;
    margin-top: 20px;">ESFJ——执政官型|东道主|供给型|给予者|关爱者|小蛋糕 </div>
            <div v-else-if="data.json.result === 'ESFP'" class="notice-item" style="text-align: center;
    margin-top: 20px;">ESFP——表演者型|演员型|锤子姐 </div>
            <div v-else-if="data.json.result === 'ESTJ'" class="notice-item" style="text-align: center;
    margin-top: 20px;">ESTJ——总经理型|主管|监护人|大男人型|管理者|尺子姐 </div>
            <div v-else-if="data.json.result === 'ESTP'" class="notice-item" style="text-align: center;
    margin-top: 20px;">ESTP——企业家型|创业者|冒险家|发电机|活在当下的践行者|挑战者|墨镜哥</div>
            <div v-else-if="data.json.result === 'INFJ'" class="notice-item" style="text-align: center;
    margin-top: 20px;">INFJ——提倡者型|作家|咨询师|劝告者|精神世界的引路人|辅导员|绿老头 </div>
            <div v-else-if="data.json.result === 'INFP'" class="notice-item" style="text-align: center;
    margin-top: 20px;">INFP——调停者型|哲学家|完美主义的知心人|治疗师|治愈者|小蝴蝶 </div>
            <div v-else-if="data.json.result === 'INTJ'" class="notice-item" style="text-align: center;
    margin-top: 20px;">INTJ——建筑师型|专家|策略家|策划者|紫老头 </div>
            <div v-else-if="data.json.result === 'INTP'" class="notice-item" style="text-align: center;
    margin-top: 20px;">INTP——逻辑学家|学者型|建筑师|小瓶子 </div>
            <div v-else-if="data.json.result === 'ISFJ'" class="notice-item" style="text-align: center;
    margin-top: 20px;">ISFJ——守卫者型|照顾者|保护者|小护士 </div>
            <div v-else-if="data.json.result === 'ISFP'" class="notice-item" style="text-align: center;
    margin-top: 20px;">ISFP——探险家型|艺术家|作曲家|小画家 </div>
            <div v-else-if="data.json.result === 'ISTJ'" class="notice-item istj-card" style="text-align: center; margin-top: 20px;">
              <!-- 标题区域 -->
              <h2 class="istj-title font-bold text-xl mb-4">ISTJ——物流师型</h2>

              <!-- 别名标签 -->
              <div class="istj-tags flex flex-wrap justify-center gap-2 mb-6">
                <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">公务员</span>
                <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">检查员</span>
                <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">蓝老头</span>
              </div>

              <!-- 主要特征 -->
              <div class="istj-features mb-8">
                <h3 class="font-semibold text-lg mb-3 text-left pl-4">主要特征</h3>
                <ul class="text-left pl-8 space-y-2">
                  <li>1. 严肃、安静、藉由集中心志与全力投入、及可被信赖获致成功。</li>
                  <li>2. 行事务实、有序、实际、逻辑、真实及可信赖</li>
                  <li>3. 十分留意且乐于任何事（工作、居家、生活）均有良好组织及有序。</li>
                  <li>4. 负责任。</li>
                  <li>5. 照设定成效来作出决策且不畏阻挠与闲言会坚定为之。</li>
                  <li>6. 重视传统与忠诚。</li>
                  <li>7. 传统性的思考者或经理。</li>
                </ul>
              </div>

              <!-- 领导模式 -->
              <div class="istj-leadership mb-8 bg-gray-50 p-4 rounded-lg">
                <h3 class="font-semibold text-lg mb-3 border-b pb-2">领导模式</h3>
                <p><strong>(1) 领导模式：</strong>以事实和经验做决定</p>
                <p>建立可靠、稳定、持续的工作绩效 尊重传统和等级制度 奖励遵循规则完成任务的员工 关注组织的即时性和实际性需要</p>
                <p><strong>倾向性顺序：</strong>①感觉 ②思维 ③情感 ④直觉</p>
                <p><strong>(2) 解决问题模式：</strong>喜欢完全依据事实在逻辑框架里进行分析，为获得理想结果，需考虑对人们的影响，然后寻找更多的可能性和其它含义。</p>
              </div>

              <!-- 工作环境倾向 -->
              <div class="istj-work-environment mb-8">
                <h3 class="font-semibold text-lg mb-3 text-left pl-4">工作环境倾向性</h3>
                <ul class="text-left pl-8 space-y-2">
                  <li>① 喜欢与现实、工作努力、关注事实和结果的人共事</li>
                  <li>② 能长期提供安全性的环境</li>
                  <li>③ 奖励稳步发展和按期完成任务的环境</li>
                  <li>④ 使用系统性工作方法的环境</li>
                  <li>⑤ 任务型定向和鼓励坚定意志的环境</li>
                  <li>⑥ 提供安静、整齐设施的环境</li>
                  <li>⑦ 环境中允许有不被打扰工作的个人空间</li>
                </ul>
              </div>

              <!-- 优缺点 -->
              <div class="istj-pro-con grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div class="bg-gray-50 p-4 rounded-lg">
                  <h3 class="font-semibold text-lg mb-3 border-b pb-2">潜在的缺点</h3>
                  <ul class="space-y-2 pl-5 list-disc">
                    <li>① 因受惠于日常工作而忽视具有长远意义的目标</li>
                    <li>② 可能忽视人际交往的细节</li>
                    <li>③ 工作方法刻板、不灵活，对变革较少开放态度</li>
                    <li>④ 期望他人和自己一样，同样注意细节和服从管理程序</li>
                  </ul>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                  <h3 class="font-semibold text-lg mb-3 border-b pb-2">发展建议</h3>
                  <ul class="space-y-2 pl-5 list-disc">
                    <li>① 除了关注现实问题，需关注更深远的、定向于未来的问题</li>
                    <li>② 需考虑人的因素，向他人表达其应得的赞赏</li>
                    <li>③ 为避免陈规，尝试寻找新的选择</li>
                    <li>④ 需培养耐心，应付那些需要用不同方式沟通或忽视规则和程序的人</li>
                  </ul>
                </div>
              </div>

              <!-- 适合领域和职业 -->
              <div class="istj-career">
                <h3 class="font-semibold text-lg mb-3 text-left pl-4">适合领域：</h3>
                <p class="text-left pl-8 mb-6">工商业领域、政府机构 金融银行业、政府机构 技术领域 医务领域</p>

                <h3 class="font-semibold text-lg mb-3 text-left pl-4">适合职业：</h3>
                <p class="text-left pl-8">审计师、会计、财务经理、办公室行政管理、后勤和供应管理、中层经理、公务（法律、税务）执行人员等银行信贷员、成本估价师、保险精算师、税务经纪人、税务检查员等；机械、电气工程师、计算机程序员、数据库管理员、地质、气象学家、法律研究者、律师等；外科医生、药剂师、实验室技术人员、牙科医生、医学研究员等</p>
              </div>
            </div>
            <div v-else-if="data.json.result === 'ISTP'" class="notice-item" style="text-align: center;
    margin-top: 20px;">ISTP——鉴赏家型|巧匠|工匠型|电钻哥</div>

           <li class="notice-item">《性格测试报告》展示的是你的性格倾向，而不是你的知识、技能、经验。</li>
            <li class="notice-item">MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，性格类型没有好坏，只有不同。每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。</li>

          </ol>
        </div>

        <el-button
          type="primary"
          size="large"
          class="start-button"
          @click="startTest"
        >
          重新测试
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive,onMounted } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()

// 从本地存储获取用户信息
const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-pro-user')),
  json: JSON.parse(localStorage.getItem('xm-pro'))
});
// 初始化获取题目
onMounted(() => {
  console.log(JSON.parse(localStorage.getItem('xm-pro')))
})
const startTest = () => {
  // 这里可以添加开始测试的逻辑
  console.log('当前用户:', data.user.studentName);
  console.log('测试开始');
  // 如果有路由可以跳转到题目页
  router.push({ path: '/questions' })
};
</script>

<style scoped>
.mbti-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.mbti-card {
  width: 100%;
  max-width: 800px;
  border-radius: 12px;
}

.mbti-content {
  padding: 40px;
  text-align: center;
}

.user-info {
  margin-bottom: 20px;
}

.title {
  color: #4298B4;
  margin-bottom: 8px;
  font-size: 28px;
  font-weight: 600;
}

.subtitle {
  color: #606266;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 400;
}

.notice-box {
  text-align: left;
  background-color: #f8f9fa;
  padding: 25px;
  border-radius: 8px;
  margin: 30px 0;
  border-left: 4px solid #4298B4;
}

.notice-title {
  color: #303133;
  margin-bottom: 15px;
  font-size: 20px;
}

.notice-list {
  padding-left: 20px;
}

.notice-item {
  color: #606266;
  margin-bottom: 12px;
  line-height: 1.6;
  font-size: 16px;
}

.start-button {
  margin-top: 20px;
  width: 200px;
  height: 50px;
  font-size: 16px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .mbti-content {
    padding: 20px;
  }

  .title {
    font-size: 24px;
  }

  .subtitle {
    font-size: 16px;
  }

  .notice-box {
    padding: 15px;
  }

  .notice-item {
    font-size: 14px;
  }

  .start-button {
    width: 100%;
  }
}
</style>
